<template>
    
    <el-card class="!border-none" shadow="never">
        <div>
            <el-button v-perms="['system:menu:add']" type="primary" @click="handleAdd()">
                <template #icon>
                    <icon name="el-icon-Plus"/>
                </template>
                新增
            </el-button>
            
            <el-button @click="handleExpand">
                展开/折叠
            </el-button>
        </div>
        
        
        <el-table
            v-loading="loading"
            ref="tableRef"
            class="mt-4"
            size="large"
            :data="tableLists"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column label="菜单名称" prop="menuName" min-width="150"/>
            
            <el-table-column label="类型" prop="menuType" min-width="80">
                <template #default="{ row }">
                    <div v-if="row.menuType === MenuEnum.CATALOGUE">目录</div>
                    <div v-else-if="row.menuType === MenuEnum.MENU">菜单</div>
                    <div v-else-if="row.menuType === MenuEnum.BUTTON">按钮</div>
                </template>
            </el-table-column>
            
            
            <el-table-column label="图标" prop="menuIcon" min-width="80">
                <template #default="{ row }">
                    <div class="flex" v-if="!!row.menuIcon">
                        <icon :name="row.menuIcon" :size="20"/>
                    </div>
                </template>
            </el-table-column>
            
            <el-table-column
                label="权限标识"
                prop="perms"
                min-width="150"
            />
            
            
            <el-table-column label="状态" prop="isDisable" min-width="100">
                <template #default="{ row }">
                    <el-tag v-if="row.isDisable === 0">正常</el-tag>
                    <el-tag v-else type="danger">停用</el-tag>
                </template>
            </el-table-column>
            
            <el-table-column label="排序" prop="menuSort" min-width="100"/>
            
            <el-table-column
                label="更新时间"
                prop="updateTime"
                min-width="180"
            ></el-table-column>
            
            <el-table-column label="操作" width="212" fixed="right">
                <template #default="{ row }">
                    <el-button
                        v-perms="['system:menu:add']"
                        type="primary"
                        link
                        @click="handleAdd(row)"
                    >
                        新增
                    </el-button>
                    
                    
                    <el-button
                        v-perms="['system:menu:edit']"
                        type="primary"
                        link
                        @click="handleEdit(row)"
                    >
                        编辑
                    </el-button>
                    
                    
                    <el-button
                        v-perms="['system:menu:del']"
                        type="danger"
                        link
                        @click="handleDelete(row.id)"
                    >
                        删除
                    </el-button>
                </template>
            
            
            </el-table-column>
        </el-table>
    </el-card>
    
    <EditPopup v-if="showEdit" ref="editRef" @success="getEditSuccess" @close="showEdit = false"/>


</template>

<script lang="ts" setup>
import {MenuEnum} from "@/config/enums/appEnums";
import {Ref} from "vue";
import EditPopup from './edit.vue'
import {ElMessage, ElTable} from "element-plus";
import feedback from "@/utils/feedback";
import {getSystemAuthMenuList, menuDelete} from "@/api/system/SystemAuthMenuController";

const tableRef = shallowRef<InstanceType<typeof ElTable>>()
const editRef = shallowRef<InstanceType<typeof EditPopup>>()

interface MenuReturnData {
    "component": string,
    "createTime": string,
    "id": number,
    "isCache": number,
    "isDisable": number,
    "isShow": number,
    "menuIcon": string,
    "menuName": string,
    "menuSort": number,
    "menuType": string,
    "params": string,
    "paths": string,
    "perms": string,
    "pid": number,
    "selected": string,
    "updateTime": string
    
}


// table 数据加载
const loading = ref(false)
// 显示配置项
const showEdit = ref(false)
// 是否展开
let isExpand = false


const tableLists: Ref<MenuReturnData[]> = ref([])


/**
 * 某个路由下新增路由
 * @param row
 */
async function handleAdd(row?: Record<any, any>) {
    // 弹窗打开
    showEdit.value = true
    
    // 赋值
    await nextTick()
    
    
    const pramData = {
        pid: null,
        menuType: MenuEnum.CATALOGUE
    }
    
    if (!!row) {
        pramData.pid = row.id
        pramData.menuType = row.menuType
        
    }
    
    
    editRef.value?.setFormData(pramData)
    editRef.value?.open('add')
}




/**
 * 对某行数据进行编辑
 */
async function handleEdit(data: any) {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getMenuDetail(data)
}

/**
 * 删除
 * @param id
 */
async function handleDelete(id: number) {
    await feedback.confirm('确定要删除？')
    
    await menuDelete({id}).then(r => feedback.msgSuccess('删除成功')).catch(msg => {
        ElMessage({type: 'error', message: msg})
    });
    
    
    await getMenuLists()
}


/**
 * 子组件处理完成确定回调方法
 */
function getEditSuccess() {
    getMenuLists()
}


/**
 * 展开
 */
function handleExpand() {
    isExpand = !isExpand
    toggleExpand(tableLists.value, isExpand)
}

/**
 * 全局展开
 *
 * @param children
 * @param unfold
 */
const toggleExpand = (children: any[], unfold = true) => {
    for (const key in children) {
        tableRef.value?.toggleRowExpansion(children[key], unfold)
        if (children[key].children) {
            toggleExpand(children[key].children!, unfold)
        }
    }
}

/**
 * 获取菜单列表值
 */
async function getMenuLists() {
    loading.value = true
    try {
        tableLists.value = await getSystemAuthMenuList()
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}


onMounted(() => {
    getMenuLists()
    
})
</script>
